// 引入 pinia
import { defineStore } from 'pinia'
// 导入查询用户菜单的接口
import { searchSelfMenu } from '@/api/user/index.js'
const modules = import.meta.glob('../views/**/*.vue')
// 定义store并导出
export const useMenuStore = defineStore('menu', {
    // 定义状态【数据】
    state: () => ({
        menuList: [],
        routerList: [] // 动态路由数据，也就是左侧菜单的路由信息
    }),
    // 获取数据的方法
    getters: {
        Array: (state) => state.menuList,
        Array: (state) => state.routerList
    },
    // 修改数据的方法
    actions: {
        setMenuList(data) {
            this.menuList = data
        },
        // 渲染动态路由数据结构，存储到pinia中，不需要每次都去渲染数据结构了
        // data就是查询出来的用户菜单
        setRouterList(data) {
            data.forEach(item => {
                // 定义数据结构
                let routerInfo = {
                    name: item.menuName,
                    path: item.path,
                    meta: {title: item.menuName},
                    // 设置组件
                    // component: () => import(`./src/views/${item.path}.vue`)
                    component: modules[`../views${item.path}.vue`]
                }
                // 将路由信息添加到数组
                this.routerList.push(routerInfo)
                // 设置子路由
                let childrenList = item.children
                childrenList.forEach(children => {
                    // 定义数据结构
                    let routerInfo = {
                        name: children.menuName,
                        path: children.path,
                        meta: {title: children.menuName},
                        // 设置组件
                        // component: () => import(`./src/views/${children.path}.vue`)
                        component: modules[`../views${children.path}.vue`]
                    }
                    this.routerList.push(routerInfo)
                })
            });
            console.log(this.routerList)
        },
        // 查询用户菜单，并且生成动态路由数据结构
        generateRouter() {
            return new Promise((resolve, reject) => {
                // 查询用户菜单
                searchSelfMenu().then(response => {
                    if (response.data.code == 200) {
                        this.setRouterList(response.data.data)
                        resolve()
                    }
                    reject()
                })
            })
        }
    },

    // 使用持久化
    // persist: {
    //     enabled: true,
    //     storage: localStorage,
    //     key: 'useMenu',
    //     path: ['menuList', 'routerList']
    // }
})